<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>部门管理</title>
		<link href="/static/css/bootstrap.min.css" rel="stylesheet">
		<link href="/static/plugins/bootstrap-table/bootstrap-table.css" rel="stylesheet">
		<link href="/static/plugins/font-awesome/css/font-awesome.css" rel="stylesheet">
		<link href="/static/css/style.css" rel="stylesheet">
		<link rel="stylesheet" href="/static/css/public.css">
		<!-- jquery 提示插件css -->
		<link href="/static/plugins/toastr.min.css" rel="stylesheet">
		<!--zTree-->
		<link rel="stylesheet" href="/static/plugins/zTree/zTreeStyle.css">
	</head>
	<body style="background-color: #f3f3f4;">
		<link rel="stylesheet" href="//static/plugins/jedate/jedate.css">
		<div style="padding: 0 15px;" id="content">
			<div class="row wrapper border-bottom white-bg page-heading">
				<div class="col-lg-10">
					<h2>部门管理</h2>
					<ol class="breadcrumb">
						<li>
							<a>系统管理</a>
						</li>
						<li>
							<a>组织机构管理</a>
						</li>
						<li>
							<strong>部门管理</strong>
						</li>
					</ol>
				</div>
			</div>
			<!--table 表格-->
			<div class="row">
				<div class="col-xs-2">
					<div class="ibox border-all">
						<div class="ibox-title">
							<h5>部门信息</h5>
						</div>
						<div class="ibox-content">
							<p class="text-center" v-if="leftTreeLoading">正在加载中,请稍后.....</p>
							<p class="text-center" v-if="!leftTreeLoading && leftTreeList.length==0">暂时没有数据,请添加</p>
							<ul id="myTree" class="ztree"></ul>
						</div>
					</div>
				</div>
				<div class="col-xs-10">
					<!--<table id="table"></table>-->
					<div class="ibox border-all">
						<div class="ibox-title">
							<h5>创客({{leftTreeType.name}})公司&nbsp;部门信息</h5>
						</div>
						<span class="halflings halflings-pencil"></span>
						<div class="ibox-content" style="position: relative;">
							<button class="btn btn-default pull-right my-btn my-btn-remove" onclick="deleteBtnClick()">删除</button>
							<button class="btn btn-default pull-right my-btn my-btn-pencil" onclick="editBenClick()">编辑</button>
							<button class="btn btn-default pull-right my-btn my-btn-add" onclick="addliClick()">添加</button>
							<button class="btn btn-default my-btn my-search-btn my-btn-search" style="top: 16px;left: 222px;">查询</button>
							<table id="table" data-height="650" data-toggle="table" data-toolbar=".toolbar" data-pagination="true" data-maintain-selected="true" data-search="true" data-show-refresh="true" data-search-align="left" data-toolbar-align="right">
								<thead>
									<tr>
										<th></th>
										<th data-field="name">部门名称</th>
										<th data-field="code">部门编号</th>
										<th data-field="abbreviation">部门简称</th>
										<th data-field="character">部门性质</th>
										<th data-field="person_in_charge">负责人</th>
										<th data-field="phone_number">电话号</th>
										<th data-field="extension_number">分机号</th>
										<th data-field="description">备注</th>
									</tr>
								</thead>
							</table>
						</div>
					</div>
				</div>
			</div>
			<!--添加 模态框-->
			<div id="modal" class="modal fade">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title">{{modalType}}部门</h4>
						</div>
						<div class="modal-manage">
							<div class="form-group col-xs-6">
								<label class="manage-title">部门名称<span class="glyphicon glyphicon-asterisk mandatory"></span></label>
								<input type="text" class="form-control form-manage" placeholder="请输入部门名称" v-model="modalData.name">
							</div>
							<div class="form-group col-xs-6">
								<label class="manage-title">部门编号<span class="glyphicon glyphicon-asterisk mandatory"></span></label>
								<input type="text" class="form-control form-manage" placeholder="请输入部门编号" v-model="modalData.code">
							</div>
							<div class="form-group col-xs-6">
								<label class="manage-title">部门简称<span class="glyphicon glyphicon-asterisk mandatory"></span></label>
								<input type="text" class="form-control form-manage" placeholder="请输入部门简称" v-model="modalData.abbreviation">
							</div>
							<div class="form-group col-xs-6">
								<label class="manage-title">部门性质<span class="glyphicon glyphicon-asterisk mandatory"></span></label>
								<select class="form-control form-manage" style="padding: 0;" v-model="modalData.character">
									<option value="===请选择===">===请选择===</option>
									<option value="综合性">综合性</option>
									<option value="协调性">协调性</option>
									<option value="咨询性">咨询性</option>
									<option value="生产性">生产性</option>
									<option value="其他性">其他性</option>
								</select>
							</div>
							<div class="form-group col-xs-6">
								<label class="manage-title">上级部门：</label>
								<input id="company" class="form-control form-manage" autocomplete="off" placeholder="===请选择===" v-model="modalDataParentName.name">
								<ul id="treeDemo" class="ztree modalZTree border-all">
									<li v-if="departmentTreeLoading">正在加载中,请稍后.....</li>
									<li v-if="!departmentTreeLoading && departmentTreeLoading.length==0">暂时没有数据,请添加</li>
								</ul>
							</div>
							<div class="form-group col-xs-6">
								<label class="manage-title">负责人：</label>
								<input type="text" class="form-control form-manage" placeholder="" v-model="modalData.person_in_charge">
							</div>
							<div class="form-group col-xs-6">
								<label class="manage-title">电话号：</label>
								<input type="text" class="form-control form-manage" placeholder="" v-model="modalData.phone_number">
							</div>
							<div class="form-group col-xs-6">
								<label class="manage-title">分机号：</label>
								<input type="text" class="form-control form-manage" placeholder="" v-model="modalData.extension_number">
							</div>
							<div class="form-group col-xs-6">
								<label class="manage-title">邮箱：</label>
								<input type="text" class="form-control form-manage" placeholder="" v-model="modalData.email">
							</div>
							<div class="form-group col-xs-6">
								<label class="manage-title">传真：</label>
								<input type="text" class="form-control form-manage" placeholder="" v-model="modalData.fax">
							</div>
							<div class="form-group col-xs-12">
								<label class="manage-title">备注：</label>
								<textarea class="form-control form-manage form-manage2" style="resize: none" v-model="modalData.description"></textarea>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
							<button type="button" class="btn btn-primary submit" id="add" onclick="add()">确认</button>
						</div>
					</div>
					<!-- /.modal-content -->
				</div>
				<!-- /.modal-dialog -->
			</div>
			<!--删除 模态-->
			<div id="deleteModal" class="modal fade">
				<div class="modal-dialog" style="width: 400px;">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						</div>
						<div class="modal-manage">
							<h3 class="text-center">是否删除当前项</h3>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
							<button type="button" class="btn btn-primary submit" onclick="deleteTable()">确认</button>
						</div>
					</div>
					<!-- /.modal-content -->
				</div>
				<!-- /.modal-dialog -->
			</div>
		</div>
		<!-- 主要的脚本 -->
		<script src="/static/js/jquery-3.1.1.min.js"></script>
		<script src="/static/js/bootstrap.min.js"></script>
		<script src="/static/plugins/bootstrap-table/bootstrap-table.js"></script>
		<script src="/static/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
		<!-- Toastr -->
		<script src="/static/plugins/toastr/toastr.min.js"></script>
		<!--zTree-->
		<script src="/static/plugins/zTree/jquery.ztree.core.js"></script>
		<!--Ztreegrid-->
		<script src="/static/plugins/bootstrap-table/bootstrap-table-tree.js"></script>
		<!-- 定制的javascript和插件 -->
		<script src="/static/js/ga.js"></script>
		<script src="/static/js/vue.min.js"></script>
		<!--公共服务插件-->
		<script src="/static/js/publicServe.js"></script>
		<script>
			var vm = new Vue({
				el: '#content',
				data: {
					leftTreeLoading: true, //左侧树结构加载判断
					leftTreeList: [], //左侧树结构值
					leftTreeType: {
						id: null,
						name: ''
					},
					departmentTreeLoading: true, //部门树结构加载判断
					departmentTreeList: [], //部门树结构值
					departmentTreeType: {
						name: ''
					},
					tableList: [], //bootstrapTable的树结构
					modalDataParentName: {
						name: ''
					}, //模态中选定树的名称
					modalType: '添加',
					modalData: { //模态输入框中的值
						name: "", //部门名称
						code: '', //部门编号
						description: null, //描述
						abbreviation: '', //部门简称
						extension_number: '', //分机号
						dis_order: null, //排序
						status: 0, //状态(0|1 0表示该机构在系统中正常 1表示该机构在系统中被禁用)
						ParentId: null, //上级部门id
						org_id: null, //公司id
						person_in_charge: '', //负责人
						phone_number: '', //电话
						email: '', //邮箱
						fax: '', //传真
						zip_code: '', //邮编
						character: '', //部门性质
					}
				},
			});
            $table = $('#table');
			//获取机构tree的值并绘制
			function getLeftZTree() {
				vm.leftTreeLoading = true;
				//获取树形结构
				$.ajax({
					url: 'http://172.16.202.224:8080/core/organization/get_tree_all/',
					type: 'POST',
					dataType: "json",
					data: '',
					async: true,
					contentType: "application/json",
					success: function(response) {
						if(response && response.success == 1) {
							vm.leftTreeLoading = false;
							vm.leftTreeList = response.data;
							//绘制zTree树
							renderZTree();
							//通过当前数据的第一行获取数据绘制表格
							if(vm.leftTreeList[0]) {
								vm.leftTreeType = vm.leftTreeList[0];
								tableList(vm.leftTreeList[0].id)
							}
						} else {
							toastr.info(response.error_msg);
						}
					},
					error: function(err) {
						toastr.info(err);
						vm.leftTreeLoading = false;
					}
				});
			}

			//部门树结构
			function getdepartmentZTree() {
				vm.departmentTreeLoading = true;
				//获取树形结构
				$.ajax({
					url: 'http://172.16.202.224:8080/core/department/get_tree_all/',
					type: 'POST',
					dataType: "json",
					data: '',
					async: true,
					contentType: "application/json",
					success: function(response) {
						if(response && response.success == 1) {
							vm.departmentTreeLoading = false;
							vm.departmentTreeList = response.data;
							//绘制zTree树
							renderZTree();
						} else {
							toastr.info(response.error_msg);
						}
					},
					error: function(err) {
						toastr.info(err);
						vm.departmentTreeLoading = false;
					}
				});
			}
			//通过机构 id 获取部门信息  并且绘制table
			function tableList(id) {
				//将获取到的公司id 赋值给变量
				vm.leftTreeType.id = id;
				//获取bootstrapTable的树结构
				$.ajax({
					url: 'http://172.16.202.224:8080/core/department/get_all/',
					type: 'POST',
					dataType: "json",
					data: JSON.stringify({
						id: id
					}),
					async: true,
					contentType: "application/json",
					success: function(response) {
						if(response && response.success == 1) {
							vm.tableList = response.data;
							console.log(vm.tableList)
							$table.bootstrapTable('load', vm.tableList);
						}
					}
				});
			}
			//zTree配置
			var setting = {
				view: {
					showLine: false
				},
				callback: {
					onClick: leftZTreeClick
				}
			};
			//添加权限模态zTree调用
			var permissionSetting = {
				view: {
					showLine: false
				},
				callback: {
					onClick: permissionZTreeClick
				}
			};
			// 左侧zTree点击事件
			function leftZTreeClick(event, treeid, treeNode, clickFlag) {
				//TODO:通过点击发送请求 获取到表
				//左侧树选定值以后 重绘表格数据
				tableList(treeNode.id);
				//将表格title改变
				vm.leftTreeType = treeNode;
			}
			//添加权限模态中选择类型 触发zTree
			function permissionZTreeClick(event, treeid, treeNode, clickFlag) {
				vm.modalDataParentName = treeNode;
			}
			//点击除模态中的zTree外 关闭zTree
			function onBodyDown(event) {
				if(!(event.target.id == "company" || event.target.id == "treeDemo" || $(event.target).parents("#treeDemo").length > 0)) {
					$("#treeDemo").fadeOut("fast");
					$("body").unbind("mousedown", onBodyDown);
				}
			}
			$('#company').click(function() {
				$("#treeDemo").slideToggle("fast");
				$("body").bind("mousedown", onBodyDown);
			});


			//bootstrapTable配置
			$table.bootstrapTable({
				toolbar: '#toolbar',
				sidePagination: 'client',
				pagination: false,
				treeView: true, //treeView:true表示启用树表格模式；
                treeId: "id", //treeId:'Id'表示每一行tree的id；
				treeField: "name", //treeField:'name'表示要对那一列进行展开；
				treeRootLevel: 1, //treeRootLevel:1表示树根的级别。
				clickToSelect: true,
				collapseIcon: "glyphicon glyphicon-menu-right", //折叠样式
				expandIcon: "glyphicon glyphicon-menu-down", //展开样式
				columns: //列表序号
					[{
						//field: 'Number',//可不加
						// title: 'Number',//标题  可不加
						formatter: function(value, row, index) {
							return index + 1;
						}
					}]
			});
			//为bootstrapTable添加每一行的事件监听
			$table.on('click-row.bs.table', function(r, row, element) {
				$('.table-line-active').removeClass('table-line-active');
				$(element).addClass('table-line-active');
				//点击以后将当前行的数据赋值给vm.modalData
				vm.modalData = row;
			});
			//bootstrapTable出现滚动条

			//添加按钮被点击
			function addliClick() {
				//清空 vm.modalData 中的值
				vm.modalData = {
					name: "", //部门名称
					code: '', //部门编号
					description: null, //描述
					abbreviation: '', //部门简称
					extension_number: '', //分机号
					dis_order: null, //排序
					status: 0, //状态(0|1 0表示该部门在系统中正常 1表示该部门在系统中被禁用)
					ParentId: null, //上级部门id
					person_in_charge: '', //负责人
					org_id: null, //公司id
					phone_number: '', //电话
					email: '', //邮箱
					fax: '', //传真
					zip_code: '', //邮编
					character: '', //部门性质
				};
				vm.modalType = "添加";
				$("#modal").modal('show');
			}
			//编辑按钮被点击
			function editBenClick() {
				if(!vm.modalData.id) {
					toastr.info("编辑时最少需要选中一行!");
					return
				}
				vm.modalType = "编辑";
				//编辑给模态中上级赋值
				for(var i = 0; i < vm.leftTreeList.length; i++) {
					if(vm.leftTreeList[i].id == vm.modalData.id) {
						vm.modalDataParentName.name = vm.leftTreeList[i].name;
					}
				}
				$("#modal").modal('show');
			}
			//删除按钮被点击
			function deleteBtnClick() {
				if(!vm.modalData.id) {
					toastr.info("删除时最少需要选中一行!");
					return
				}
				$("#deleteModal").modal('show');
			}
			//删除表格中一项
			function deleteTable() {
				$.ajax({
					url: 'http://172.16.202.224:8080/core/department/del/',
					type: 'POST',
					dataType: "json",
					data: JSON.stringify({
						id: vm.modalData.id
					}),
					async: true,
					contentType: "application/json",
					success: function(response) {
						if(response && response.success == 1) {
							$("#deleteModal").modal('hide');
							//获取zTree信息 并且绘制
							tableList(vm.leftTreeType.id);
							//重新绘制莫太中的树结构
							getdepartmentZTree();
							toastr.success('删除成功');
						} else {
							toastr.info(response.error_msg);
						}
					},
					error: function(err) {
						toastr.info(err);
					}
				});
			}
			//添加 编辑一行
			function add() {
				console.log(vm.modalData);
				if(!vm.modalData.name) {
					toastr.info('部门名称不能为空!');
					return
				}
				if(vm.modalData.character == '===请选择===') {
					toastr.info('部门性质不能为空!');
					return
				}
				//将模态中的数据深度克隆一份 防止旧值被修改
				var newModalData = Object.assign({}, vm.modalData);
				//checkBox 将true false 转换为 0 1
				newModalData.status ? newModalData.status = 0 : newModalData.status = 1; //当前状态
				newModalData.parent_id = vm.modalDataParentName.id;
				// 修改
				if(vm.modalType == "修改") {
					$.ajax({
						url: 'http://172.16.202.224:8080/core/department/edit/',
						type: 'POST',
						dataType: "json",
						data: JSON.stringify(newModalData),
						async: true,
						contentType: "application/json",
						success: function(response) {
							if(response && response.success == 1) {
								$("#modal").modal('hide');
								//获取zTree信息 并且绘制
								tableList(vm.leftTreeType.id);
								//重新绘制莫太中的树结构
								getdepartmentZTree();
								toastr.success('修改成功')
							} else {
								toastr.info(response.error_msg);
							}
						},
						error: function(err) {
							toastr.info(err);
						}
					});
				} else {
					newModalData.org_id = vm.leftTreeType.id;
					$.ajax({
						url: 'http://172.16.202.224:8080/core/department/add/',
						type: 'POST',
						dataType: "json",
						data: JSON.stringify(newModalData),
						async: true,
						contentType: "application/json",
						success: function(response) {
							if(response && response.success == 1) {
								$("#modal").modal('hide');
								//获取zTree信息 并且绘制
								tableList(vm.leftTreeType.id);
								//重新绘制莫太中的树结构
								getdepartmentZTree();
								toastr.success('添加成功');
							} else {
								toastr.info(response.error_msg);
							}
						},
						error: function(err) {
							toastr.info(err);
						}
					});
				}
			};
			//绘制zTree树 方法
			function renderZTree() {
				//权限模态中树绘制
				$.fn.zTree.init($("#treeDemo"), permissionSetting, vm.departmentTreeList);
				//左侧树
				$.fn.zTree.init($("#myTree"), setting, vm.leftTreeList);
			};
			//dom渲染完成后加载
			$(document).ready(function() {
				//获取zTree信息 并且绘制
				getLeftZTree();
				getdepartmentZTree();
			});
			//弹出框提示配置
			toastr.options = {
				"closeButton": true,
				"debug": false,
				"progressBar": true,
				"preventDuplicates": false,
				"positionClass": "toast-bottom-right",
				"onclick": null,
				"showDuration": "400",
				"hideDuration": "1000",
				"timeOut": "2000",
				"extendedTimeOut": "1000",
				"showEasing": "swing",
				"hideEasing": "linear",
				"showMethod": "fadeIn",
				"hideMethod": "fadeOut"
			};
		</script>
	</body>
</html>